<template>
  <div>
    <div id="x6-ctm-container"></div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'
import ctmNode from '@/views/x6node/ctmNode.vue'

export default {
  name: 'x6CustomNode',
  data() {
    return {
      graph: null,
      x6Data: {
        nodes: [],
        edges: [],
      },
    }
  },
  mounted() {
    this.initX6()
  },
  methods: {
    initX6() {
      register({
        shape: 'custom-vue-x6node',
        width: 100,
        height: 100,
        component: ctmNode,
      })

      this.graph = new Graph({
        container: document.getElementById('x6-ctm-container'),
        width: '100%',
        height: 300,
        background: {
          color: '#F2F7FA',
        },
      })

      this.graph.addEdge({
        source: { x: 540, y: 40 },
        target: { x: 580, y: 180 },
        vertices: [{ x: 540, y: 140 }],
        connector: { name: 'smooth' },
        attrs: {
          line: {
            stroke: '#1890ff',
            strokeDasharray: 5,
            targetMarker: 'classic',
            style: {
              animation: 'ant-line 30s infinite linear',
            },
          },
        },
      })

      const node1 = {
        id: 'node1',
        shape: 'custom-vue-x6node',
        width: 170,
        height: 154,
        x: 0,
        y: 0,
      }
      const node2 = {
        id: 'node2',
        shape: 'custom-vue-x6node',
        width: 170,
        height: 154,
        x: 300,
        y: 0,
      }
      const node3 = {
        id: 'node3',
        shape: 'custom-vue-x6node',
        width: 170,
        height: 154,
        x: 600,
        y: 0,
      }
      this.x6Data = {
        nodes: [node1, node2],
        edges: [
          {
            source: node1.id,
            target: node2.id,
            label: 'x6',
          },
        ],
      }

      this.graph.fromJSON(this.x6Data) // 渲染元素
      // this.graph.centerContent() // 居中显示

      this.graph.addNode(node3)
    },
  },
}
</script>

<style scoped></style>
